<template>
  <div class="share page">
    <div class="main">
      <div class="con">
        <img :src="user.avatar" alt="" class="img">
        <span class="name">{{user.name}}</span>
        <span class="desc">{{user.code}}</span>
<!--        <div class="save">-->
<!--          <span>截屏图片到手机</span>-->
<!--        </div>-->
        <span class="info">
          扫描下方二维码注册
        </span>
        <div class="cimg">
          <img :src="url" alt="" class="code">
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import QRCode from 'qrcode'
import { WX_QR_CODE, APP_URL } from '../../app.config'
import { mapState } from 'vuex'
// import { LEVELS } from '../../const'

export default {
  created () {
    const orderId = this.$route.query.orderId
    let text = APP_URL + '?pid=' + this.user.id
    if (orderId) { // 有订单ID
      // text += '&bind=true&id=' + orderId
      text = APP_URL + '/order/img?bind=true&id=' + orderId + '&pid=' + this.user.id
    }
    // if (this.user.levelId === LEVELS.SHOP) { // 药店分享直接是拍照的
    //   text = APP_URL + '/order/img?pid=' + this.user.id
    // }
    QRCode.toDataURL(text, {
      type: 'terminal',
      width: '600',
      errorCorrectionLevel: 'H'
      // eslint-disable-next-line handle-callback-err
    }, (err, url) => {
      // this.showSlot(code)
      this.url = url
    })
  },
  computed: {
    ...mapState({
      user: (state) => state.user
    })
  },
  data () {
    return {
      url: '',
      WX_QR_CODE: WX_QR_CODE
    }
  }
}
</script>

<style scoped lang="stylus">
  .share
    background-color #F5F4F7
    background url("./bg.png") no-repeat
    background-size 100%
    display flex
    align-items center
    justify-content center

    .main
      width 100%
      opacity 0.89
      background: rgba(255, 255, 255, 1);
      box-shadow: 0px 2px 34px 0px rgba(39, 52, 125, 0.25);
      border-radius: 12px 12px 12px 12px;
      .con
        transform translateY(-50px)
        display flex
        flex-direction column
        align-items center
        justify-content center
        .img
          border-radius 50%
          width 100px
          height 100px
        .name
          color #212C67
          dpr-font(16Px)
          margin-top 20px
          margin-bottom 13px
        .desc
          color #212C67
          dpr-font(14Px)
        .save
          width:171px;
          height:42px;
          background:rgba(255,158,0,1);
          border-radius:21px 21px 21px 21px;
          dpr-font(14Px)
          display flex
          align-items center
          justify-content center
          margin-top 22px
          color white
        .info
          margin-top 35px
          dpr-font(14Px)
          font-weight:400;
          color:rgba(33,44,103,1);
        .cimg
          margin-top 10px
          background url("./cbg.png") no-repeat
          background-size 100% 100%
          width 200px
          height 200px
          padding 10px 10px
          .code
            width 100%
            width 100%
            border-radius 10px
            margin-bottom 40px

</style>
